<template>
  <div>
    <!-- 模块化管理页面 -->
    <div class="settitle">
      <div class="setimg" @click="$router.back()">
        <img src="../assets/imgs/iconse/左箭头.png" alt="" />
      </div>
      <div class="text">
        <h2>模块管理</h2>
        <span @click="setlist">保存</span>
      </div>
    </div>

    <!-- 模块上的列表 -->
    <div class="truelist">
      <div
        class="trueitem"
        v-for="item in truelist()"
        :key="item.id"
        @click="dels(item.id)"
      >
        <div class="itemtext">
          <p>{{ item.title }}</p>
        </div>
        <div class="catimg">
          <img src="../assets/imgs/del.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 隐藏列表 -->
    <div class="falselist">
      <div
        class="falseitem"
        v-for="item in falselist()"
        :key="item.id"
        @click="additem(item.id)"
      >
        <div class="itemtext">
          <p>{{ item.title }}</p>
        </div>
        <div class="catimg">
          <img src="../assets/imgs/添加2.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 确认删除提示 -->
    <div class="aasi">
      <van-dialog
        v-model="show"
        message="确定删除此模块？"
        show-cancel-button
        round-button
        confirm-button-text="删除"
        @confirm="delitem"
        confirm-button-color="#ff0d0d"
      >
      </van-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      runlist: null,
      show: false,
      delindex: 0,
    };
  },
  methods: {
    setlist() {
      // JSON.parse(list)是把字符串转数组 存的时候转字符串，取就转对象
      let oldlist = JSON.parse(localStorage.getItem("keys"));

      //修改卡片
      // 将修改值写入旧数组中
      oldlist = this.runlist;
      console.log(this.runlist);
      console.log("oldlist", oldlist);

      // 重新上传数据
      localStorage.setItem("keys", JSON.stringify(oldlist));
      localStorage.setItem("oniu", 1);
      this.$router.push("creator");
    },

    getlist() {
      //获取全列表数据
      //   let index = localStorage.getItem("index");
      let oldlist = JSON.parse(localStorage.getItem("keys"));
      this.runlist = oldlist;
      console.log("模块化管理页面", this.runlist);
    },

    truelist() {
      //显示列表
      return this.runlist.filter((item) => !item.shows);
    },
    falselist() {
      //隐藏列表
      return this.runlist.filter((item) => item.shows);
    },

    dels(id) { //弹起确认删除弹窗
      this.show = true;
      this.delindex = id;
    },

    delitem() {
      //删除模块功能
      let index = this.runlist.findIndex((item) => item.id == this.delindex);
      this.runlist[index].shows = true;
      console.log(index);
    },
    additem(id) {
      //添加模块功能
      let index = this.runlist.findIndex((item) => item.id == id);
      this.runlist[index].shows = false;
      console.log(id);
    },
  },
  created() {
    this.getlist();
  },
};
</script>

<style lang="scss" scoped>
// 弹窗内容样式
.aasi ::v-deep .van-dialog__message {
  font-size: 20px;
  padding: 50px 60px;
}

// 标题
.settitle {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;

  box-shadow: 0px 0px 0px 1px rgba($color: #cccc, $alpha: 0.4);
  .setimg {
    height: 18px;
    position: absolute;
    left: 15px;
    img {
      height: 100%;
      display: block;
    }
  }
  .text {
    margin: 0 auto;
    span {
      display: block;
      width: 50px;
      height: 30px;
      line-height: 30px;
      font-size: 15px;
      color: #1a73e8;
      text-align: center;
      position: absolute;
      top: 0px;
      bottom: 0px;
      right: 20px;
      margin: auto 0;
    }
  }
}

/*模块上的列表*/
.truelist {
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 20px;
  .trueitem {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 6px #f2f2f2;
    margin-bottom: 30px;
    .itemtext {
      margin-left: 20px;
      p {
        font-size: 20px;
        color: #333;
      }
    }
    .catimg {
      height: 30px;
      margin-right: 30px;
      img {
        height: 100%;
        display: block;
      }
    }
  }
}

/*隐藏列表*/
.falselist {
  box-sizing: border-box;
  padding: 60px 0px;
  margin: 0 40px;
  border-top: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  .falseitem {
    height: 30px;
    display: flex;
    padding: 5px 10px;
    align-items: center;
    flex-wrap: wrap;
    background-color: rgba(26, 115, 232, 0.2);
    margin-right: 40px;
    margin-bottom: 10px;
    border-radius: 20px;
    .itemtext {
      p {
        font-size: 14px;
        color: #1a73e8;
      }
    }
    .catimg {
      height: 15px;
      opacity: 0.7;
      margin-left: 10px;
      img {
        height: 100%;
        display: block;
      }
    }
  }
}
</style>